<template>
  <el-card>
    <div class="sendout">
      <h3 class="applyRecode">待发货订单</h3>
      <el-form  class="form" :model="form" ref="form" label-width="100px">
        <el-form-item class="dates" label="支付时间">
          <el-col :span="5">
            <el-form-item prop="stratTime" size="small">
              <el-date-picker v-model="form.stratTime" type="datetime" placeholder="选择开始日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col class="zuo" :span="5">
            <el-form-item prop="endTime" size="small">
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item class="send" size="small" label="是否发货：">
          <el-select class="publis" v-model="form.sendit" placeholder="请选择">
            <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="sea" size="small" label="搜索：">
          <el-input placeholder="请输入订单编号/下单人手机号" v-model="form.search"></el-input>
        </el-form-item>
        <div class="btns"><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <div class="btns">
        <el-button type="primary" size="small">导出待发货清单</el-button>
        <el-button type="primary" size="small">导入发货清单</el-button>
      </div>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="faId" label="发货单ID" align="center"></el-table-column>
        <el-table-column prop="orderId" label="订单ID" align="center"></el-table-column>
        <el-table-column prop="unfa" label="待发货" align="center"></el-table-column>
        <el-table-column prop="cuifa" label="是否催发货" align="center" width="100px"></el-table-column>
        <el-table-column prop="sendmsg" label="下单人信息" align="center"></el-table-column>
        <el-table-column prop="paymsg" label="支付时间" align="center" width="120px"></el-table-column>
        <el-table-column prop="sendlan" label="下单人留言" align="center" width="190px"></el-table-column>
        <el-table-column prop="getmsg" label="收货人信息" align="center" width="190px"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center" width="110px"></el-table-column>
        <el-table-column prop="sku" label="SKU" align="center" width="150px"></el-table-column>
        <el-table-column prop="mounts" label="数量" align="center" width="90px"></el-table-column>
        <el-table-column prop="startimt" label="开始时间" align="center" width="90px"></el-table-column>
        <el-table-column prop="endtime" label="结束时间" align="center" width="90px"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="send = true" size="small">发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="确认发货" :visible.sync="send">
        <el-form :model="form1">
          <el-form-item label="是否有物流：" :label-width="formLabelWidth">
            <el-select v-model="form1.material" size="small" placeholder="请选择：">
              <el-option v-for="(wu, index) in wus" :key="index" :label="wu.label" :value="wu.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流公司：" :label-width="formLabelWidth">
            <el-select v-model="form1.compony" size="small" placeholder="请选择：">
              <el-option v-for="(com, cindex) in coms" :key="cindex" :label="com.label" :value="com.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="sea" size="small" label="运单号：" :label-width="formLabelWidth">
            <el-input placeholder="请输入运单号" v-model="form.orderNum"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="send = false">取 消</el-button>
          <el-button type="primary" @click="send = false">确 定</el-button>
        </div>
      </el-dialog>
      <div class="page">
        <el-pagination background style="float:right;margin:0 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'sendout',
  data () {
    return {
      gdnames: '美的小家电',
      jian: 1,
      licheck: false,
      baocheck1: false,
      baocheck2: false,
      baonames: '美的小家电',
      bajian: '2',
      baonames1: '美的小家电',
      bajian1: '1',
      currentPage: 1,
      pagesize: 10,
      total: 40,
      chai: false,
      send: false,
      formLabelWidth: '120px',
      form1: {
        material: '',
        compony: '',
        orderNum: ''
      },
      wus: [
        {
          label: '是',
          value: '0'
        },
        {
          label: '否',
          value: '1'
        }
      ],
      coms: [
        {
          label: '国安创客',
          value: '0'
        },
        {
          label: '中益善源',
          value: '1'
        }
      ],
      form: {
        stratTime: '',
        endTime: '',
        sendit: '',
        search: ''
      },
      tableData: [
        {
          faId: '',
          orderId: '',
          unfa: '7天8小时',
          cuifa: '否',
          sendmsg: '测试id手机号：13811112222',
          paymsg: '2018-12-18 17:16:14',
          sendlan: '我是留言',
          getmsg: '北京市朝阳区望京soho1号塔',
          goodsName: '蜂蜜柚子茶',
          sku: '产品类型：件；计量单位：kg',
          mounts: '1',
          startimt: '',
          endtime: ''
        },
        {
          faId: '',
          orderId: '',
          unfa: '7天8小时',
          cuifa: '是',
          sendmsg: '',
          paymsg: '',
          sendlan: '',
          getmsg: '',
          goodsName: '',
          sku: '',
          mounts: '1',
          startimt: '',
          endtime: ''
        }
      ],
      items: [
        {
          label: '未发货',
          value: '0'
        },
        {
          label: '已发货',
          value: '1'
        }
      ],
      Unpacked: [],
      pack: []
    }
  },
  created () {
  },
  methods: {
    submitPack () {
      let index = this.pack.findIndex(item => {
        return !item.flag
      })
      if (index !== -1) {
        this.$message.warning('有未选中的包')
        return false
      }
      this.chai = false
      this.$alert('订单拆分成功', '', {
        confirmButtonText: '确定',
        center: true
      })
    },
    build () {
      let arr = this.Unpacked.filter(item => {
        return item.flag
      })
      this.Unpacked = this.Unpacked.filter(item => {
        return !item.flag
      })
      this.pack = this.pack.map(item => {
        item.flag = false
        return item
      })
      this.pack.push({
        flag: true,
        arr
      })
    },
    findInit () {
      // this.currentPage = 1
      // this.init()
    },
    handleSizeChange (val) {
      // this.pagesize = val
      // this.init()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // this.currentPage = val
      // this.init()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
.sendout {
  .form {
    display: flex;
    .dates {
      .el-form-item {
        .el-form-item__content {
          .el-date-editor.el-input {
            width: 188px;
          }
        }
      }
      .line {
        padding-left: 90px;
      }
      .zuo {
        margin-left: 21px;
      }
    }
    .send {
      margin-left: -74px;
      .el-form-item__content {
        .el-select {
          width: 150px;
        }
      }
    }
    .sea {
      .el-form-item__content {
        .el-input {
          width: 215px;
        }
      }
    }
  }
  .tables {
    margin: 15px 0 30px;
  }
  .el-dialog {
    width: 40%;
    .sea {
      .el-input {
        width: 350px;
      }
    }
    .san {
      display: flex;
      .wei {
        width: 40%;
        padding: 5px 10px;
        border: 1px solid #ccc;
        margin-right: 30px;
        .tit {
          text-align: center;
        }
        .list {
          display: flex;
          justify-content: space-between;
        }
      }
      .buns {
        padding-right: 30px;
        .el-button:last-child {
          margin-top: 20px
        }
      }
      .already {
        width: 40%;
        padding: 5px 10px;
        border: 1px solid #ccc;
        .tit {
          text-align: center;
        }
        .albao {
          padding-bottom: 15px;
          .list {
            display: flex;
            justify-content: space-between;
          }
        }
        .baotwo {
          border-top: 1px solid #f5f5f5;
        }
      }
    }
  }
  .btns {
    .el-button {
      border-radius: 4px;
      margin-left: 20px;
    }
  }
}
</style>
